<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="30%"
    fullscreen
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title" style="width: 298px"></el-input>
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <el-upload
          action="/dev-api/admin/s/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :headers="{ token: getToken, schoolid: getSchoolid }"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="imgDialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item :label="itemLabel" prop="try">
        <el-input type="textarea" v-model="ruleForm.try" v-if="columnFlag" style="width: 330px"  :height="80" placeholder="请输入课程介绍"></el-input>
        <tinymce v-model="ruleForm.try" :height="300" :width="600" v-else />
      </el-form-item>
      <el-form-item label="课程内容" prop="content">
        <tinymce
          v-model="ruleForm.content"
          :width="600"
          :height="300"
          v-if="type == 'media' || type == 'column'"
        />
        <el-upload
          class="upload-demo"
          action="/dev-api/admin/s/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          v-else-if="type == 'audio'"
        >
          <el-button size="small" type="primary">上传音频</el-button>
          <div slot="tip" class="el-upload__tip">
            <p style="margin: 0">
              格式支持mp3、m4a，为保证音频加载与播放的流畅性，建议
            </p>
            <p style="margin: 0">
              上传大小不超过500M
            </p>
          </div>
        </el-upload>
        <el-upload
          class="upload-demo"
          action="/dev-api/admin/s/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          v-else
        >
          <el-button size="small" type="primary">上传视频</el-button>
          <div slot="tip" class="el-upload__tip">
            <p style="margin: 0">
              支持mp4，avi，wmv，mov，flv，rmvb，3gp，m4v，mkv格
            </p>
            <p style="margin: 0">
              式；文件最大不超过5G。 当前店铺版本最大支持720高清转码
            </p>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="课程价格" prop="price">
        <el-input-number v-model="ruleForm.price" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="0">下架</el-radio>
          <el-radio :label="1">上架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="更新状态" v-if="type == 'column'">
        <el-radio-group v-model="ruleForm.isend">
          <el-radio :label="0">下架</el-radio>
          <el-radio :label="1">上架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { getToken, getSchoolid } from "@/utils/auth.js";

export default {
  components: {
    Tinymce
  },
  props: {
    columnFlag: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    itemLabel: {
      type: String,
      default: () => {
        return "";
      }
    },
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    dialogTitle: {
      type: String,
      default: () => {
        return "";
      }
    },
    type: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      ruleForm: {
        title: "",
        cover: "",
        try: "",
        content: ``,
        price: "",
        status: 1,
        t_price: 10,
        isend: 0
      },
      rules: {},
      imgDialogVisible: false,
      dialogImageUrl:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201407%2F16%2F20140716212515_TvYEA.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620051441&t=a46f3f27885c2087828d398d9c2ff46d",
      RuleForm: {},
      fileList: []
    };
  },
  methods: {
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      alert(file.url);
      this.dialogImageUrl = file.url;
      this.imgDialogVisible = true;
    },
    // 音频 视频
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 提交
    sure() {
      if (this.dialogTitle == "新增") {
        this.$emit("addCourse", this.ruleForm);
      } else {
        this.$emit("updateCourse", this.ruleForm);
      }
    },
    // 回显 item
    showData(item) {
      this.ruleForm = item;
    }
  },
  computed: {
    getToken() {
      return getToken();
    },
    getSchoolid() {
      return getSchoolid();
    }
  }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
